<script setup lang="jsx">
import { ref, onMounted, reactive, nextTick } from 'vue'
import { formatColumn } from '@/utils/tools.js'
import { DraggableModal } from '@/components/core/draggable-modal'
import { queryWelfareDetailList, downloadWelfareDetailTable } from '@/api/home'
import { useCorePage } from '@/composables/open-link.js'
import { downloadFile } from '@/utils/file'
import { message as AMessage } from 'ant-design-vue'

const props = defineProps({
  peDetailInfo: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['updateVisible'])
const loading = ref(false)

// 获取tabledata
const columns = [
  {
    title: '理赔号',
    width: 120,
    dataIndex: 'claimNo',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '理赔状态',
    width: 120,
    dataIndex: 'caseStatus',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '就诊人',
    width: 150,
    dataIndex: 'patientName',
    ellipsis: true
  },
  {
    title: '就诊日期',
    width: 180,
    dataIndex: 'treatmentDate',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '就诊医院',
    width: 220,
    dataIndex: 'hospitalName',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '理赔类型',
    width: 100,
    dataIndex: 'claimType',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '索赔金额 ',
    width: 100,
    dataIndex: 'claimAmount',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '折扣价',
    width: 100,
    dataIndex: 'discountPrice',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '理算赔付金额(账单)',
    width: 140,
    dataIndex: 'clamAmount',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '福利占用金额/天数/次数',
    width: 180,
    dataIndex: 'usedVal',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '同一事件号',
    width: 100,
    dataIndex: 'eventNo',
    customRender: ({ text, record, index }) => formatColumn(text)
  },
  {
    title: '理赔收到日期',
    width: 100,
    dataIndex: 'receiveDate',
    customRender: ({ text, record, index }) => formatColumn(text)
  },

  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100
  }
]
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  getTableList()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  total: 0,
  onChange: handlePageChange,
  size: 'large'
})
const dataSource = ref([])
async function getTableList() {
  loading.value = true
  const data = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    insuredId: props.peDetailInfo.insuredId,
    rulDetNo: props.peDetailInfo.rulDetNo
  }
  let res = null
  try {
    res = await queryWelfareDetailList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    dataSource.value = res.data.recode
    pagination.total = Number(res.data.total)
  }
}
async function initData() {
  pagination.current = 1
  getTableList()
}
const visible = ref(false)
onMounted(async () => {
  await nextTick()
  visible.value = true
  initData()
})

function handleCancel() {
  visible.value = false
  emit('updateVisible', false)
}
let exportLoading = ref(false)
async function exportTable() {
  const data = {
    insuredId: props.peDetailInfo.insuredId,
    rulDetNo: props.peDetailInfo.rulDetNo,
    ruleDes: props.peDetailInfo.detailTitle
  }
  exportLoading.value = true
  let res = null
  try {
    res = await downloadWelfareDetailTable(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    exportLoading.value = false
  }
  if (res) {
    downloadFile(res)
    AMessage.success('下载成功')
  }
}
</script>
<template>
  <DraggableModal
    v-model:open="visible"
    :showCloseIcon="true"
    width="1400px"
    :footer="null"
    title="福利使用详情"
    @cancel="handleCancel"
  >
    <div class="add-btn">
      <span class="title">{{ peDetailInfo.detailTitle }}</span>
      <a-button type="primary" :loading="exportLoading" @click="exportTable">导出表格</a-button>
    </div>
    <a-table
      :scroll="{ x: 800, y: 500 }"
      :data-source="dataSource"
      size="middle"
      :class="{ 'table-bottom': dataSource.length == 0 }"
      :pagination="pagination"
      :loading="loading"
      :columns="columns"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'operation'">
          <span
            class="table-operation"
            @click="
              useCorePage({
                claimNo: record.claimNo,
                type: 'claimDetail'
              })
            "
            >理赔详情</span
          >
        </template>
      </template>
    </a-table>
  </DraggableModal>
</template>
<style lang="scss" scoped>
.table-bottom {
  margin-bottom: 20px;
}
.add-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 12px;
  .title {
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    padding-right: 30px;
  }
}
</style>
